<!--
 * @Description: 设备路由查询
 * @Author: 0001101008/HuYuxi
 * @Date: 2021-10-19 15:10:04
 * @LastEditTime: 2021-11-08 18:26:16
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="page-content" style="padding: 0">
    <el-form :inline="true" ref="routeForm" :model="form" label-width="80px">
      <el-form-item
        label="路由模式"
        prop="objType"
        :rules="{required: true, message: '请检查必填项！', trigger: 'change'}"
      >
        <el-select v-model="form.objType" style="width:100%">
          <el-option label="公网" value="global"></el-option>
          <el-option label="私网" value="vpn"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="VPN名称"
        prop="vrf"
        :rules="{required: false, message: '请检查必填项！', trigger: 'change'}"
        v-if="ne.neLayer === 'Mixed'"
      >
        <el-select v-model="form.vrf" clearable filterable>
          <el-option
            v-for="(item, index) in vpnList"
            :key="index"
            :value="item.instanceName"
            :label="item.instanceName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="VPN名称"
        prop="vrf"
        :rules="{required: form.objType === 'vpn' ? true : false, message: '请检查必填项！', trigger: 'change'}"
        v-if="ne.neLayer === 'Access'"
      >
        <el-select v-model="form.vrf" clearable filterable>
          <el-option
            v-for="(item, index) in vpnList"
            :key="index"
            :value="item.instanceName"
            :label="item.instanceName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="路由类型" prop="owner">
        <el-select v-model="form.owner" style="width:100%" clearable>
          <el-option label="BGP" value="BGP"></el-option>
          <el-option label="OSPF" value="OSPF"></el-option>
          <el-option label="STATIC" value="STATIC"></el-option>
          <el-option label="IPSEC" value="IPSEC"></el-option>
          <el-option label="PPP" value="ppp"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleSubmit" type="primary" plain>确认</el-button>
      </el-form-item>
    </el-form>
    <div class="trace-result">
      <tao-table
        class="table-box"
        :data="dataList"
        :page="page"
        @changePage="changePage"
        :showPage="true"
        ref="table"
      >
        <!-- 路由模式 -->
        <el-table-column
          label="路由模式"
          show-overflow-tooltip
          width="100"
          align="center"
          prop="areaId"
          v-if="columns[0].show"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.objType === 'vpn'">私网</span>
            <span v-if="scope.row.objType === 'global'">公网</span>
          </template>
        </el-table-column>
        <!-- VPN名称 -->
        <el-table-column
          label="VPN名称"
          show-overflow-tooltip
          min-width="150"
          align="center"
          prop="vrf"
          v-if="columns[1].show"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.vrf">{{scope.row.vrf}}</span>
            <span v-if="!scope.row.vrf">-</span>
          </template>
        </el-table-column>
        <!-- 路由类型 -->
        <el-table-column
          label="路由类型"
          show-overflow-tooltip
          width="150"
          align="center"
          prop="protocolType"
          v-if="columns[2].show"
        ></el-table-column>
        <!-- 类型 -->
        <el-table-column
          label="类型"
          show-overflow-tooltip
          min-width="80"
          align="center"
          prop="ipv6"
          v-if="columns[3].show"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.ipv6">IPv6</span>
            <span v-if="!scope.row.ipv6">IPv4</span>
          </template>
        </el-table-column>
        <!-- 目标网段 -->
        <el-table-column
          label="目标网段"
          show-overflow-tooltip
          width="150"
          align="center"
          prop="dest"
          v-if="columns[4].show"
        ></el-table-column>
        <!-- 下一跳地址 -->
        <el-table-column
          label="下一跳地址"
          show-overflow-tooltip
          min-width="150"
          align="center"
          prop="nextHop"
          v-if="columns[5].show"
        ></el-table-column>
        <!-- 初始端口 -->
        <el-table-column
          label="初始端口"
          show-overflow-tooltip
          min-width="100"
          align="center"
          prop="intfName"
          v-if="columns[6].show"
        ></el-table-column>
        <!-- 优先级 -->
        <el-table-column
          label="优先级"
          show-overflow-tooltip
          min-width="100"
          align="center"
          prop="priority"
          v-if="columns[7].show"
        ></el-table-column>
        <!-- Metric -->
        <el-table-column
          label="Metric"
          show-overflow-tooltip
          min-width="100"
          align="center"
          prop="metric"
          v-if="columns[8].show"
        ></el-table-column>
        <!-- 是否生效 -->
        <el-table-column
          label="是否生效"
          show-overflow-tooltip
          min-width="80"
          align="center"
          prop="metric"
          v-if="columns[9].show"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.valid">是</span>
            <span v-if="!scope.row.valid">否</span>
          </template>
        </el-table-column>
      </tao-table>
    </div>
  </div>
</template>
<script>
export default {
  props: ['ne'],
  data () {
    return {
      form: {
        objType: null,
        vrf: null,
        ipv6: false,
        owner: null
      },
      dataList: [],
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      columns: [
        { name: '路由模式', show: true },
        { name: 'VPN名称', show: true },
        { name: '路由类型', show: true },
        { name: '类型', show: true },
        { name: '目标网段', show: true },
        { name: '下一跳地址', show: true },
        { name: '初始端口', show: true },
        { name: '优先级', show: true },
        { name: 'Metric', show: true },
        { name: '是否生效', show: true },
      ],
      vpnList: []
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.getVpnList();
    });
  },
  methods: {
    // 过滤显示字段
    changeColumn (columns) {
      this.columns = columns;
      this.$refs.table.doLayout();
    },
    // 切换页码 & 显示条数
    changePage (page) {
      if (page.page) {
        this.page.page = page.page;
      } else {
        this.page.page = 1;
        this.page.pageSize = page.limit;
      }
      this.refresh();
    },
    refresh (params) {
      let _this = this;
      _this.dataList = [];
      _this.$http.post({
        url: '/api/resource/nemng/command/' + _this.ne.id,
        data: params
      }).then(res => {
        if (res) {
          let list = res;
          if (list.length > 0) {
            _this.dataList = list;
          } else {
            _this.$message.info('暂无数据');
          }
        }
      });
    },
    getVpnList () {
      let _this = this;
      let params = {
        limit: 0,
        offset: 0,
        dgId: _this.ne.dgId
      };
      _this.$http.post({
        url: '/api/sdwan/vpn/query',
        data: params
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          _this.vpnList = resultBody.objects;
        }
      });
    },
    // 去重
    uniqueArr (arr, time) {
      if (arr.length === 0) {
        return;
      }
      for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
          if (arr[i][time] === arr[j][time]) {
            arr.splice(j, 1);
            j--;
          }
        }
      }
      return arr;
    },
    // 确定
    handleSubmit () {
      let _this = this;
      _this.$refs['routeForm'].validate(valid => {
        if (valid) {
          let params = {
            commandCode: 'route.forwardtable.get',
            paras: {
              vrf: _this.form.vrf,
              ipv6: _this.form.ipv6,
              objType: _this.form.objType,
              owner: _this.form.owner
            }
          };
          _this.refresh(params);
        } else {
          _this.$message.error('请检查必填项！');
        }
      });
    }
  }
};
</script>